<template>
  <div class="loader" :class="isFixed === true ? 'fixed' : ''">
    <div class="spinner" v-if="isShow">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
    <span>{{finishedText}}</span>
  </div>
</template>

<script>
export default {
  props: {
    isFixed: Boolean,
    isShow: Boolean,
    finishedText: String,
    noData: Boolean
  }
}
</script>

<style lang="stylus" scoped>
.loader {
  .spinner {
    width: 0.4rem;
    height: 0.4rem;
    position: relative;
    margin: 0.4rem auto 0.2rem;
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ff5b73;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2s infinite ease-in-out;
    animation: bounce 2s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  .spinner2 {
    width: 0.4rem;
    height: 0.4rem;
    position: relative;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }

    40% {
      transform: translateY(-15px);
    }

    60% {
      transform: translateY(-15px);
    }
  }

  .bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
  }

  &.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(41, 40, 69, 0.95);
    z-index: 6666;

    .spinner {
      left: 50%;
      top: 50%;
      margin: -0.2rem 0 0 -0.2rem;
    }
  }
}
</style>
